<template>
  <view class="myOrder">
	<u-sticky bgColor="#fff">
		<u-tabs :list="list" lineColor="#c30d23" inactiveStyle="#837c7a" 
			activeStyle="font-weight:bold" :scrollable="false"
			@change="changeTabs"
		></u-tabs>
	</u-sticky>
	
	<template v-if="tabIndex === 0">
	<view class="list" v-if="dataList.length">
		<view class="item" v-for="(item,index) in dataList" :key="item.orderId">
			<view class="item-t flex-j-sb flex-a-c">
				<text class="tit">{{item.goodsCode}}/{{item.goodsName}}</text>
				<text class="status">已成</text>
			</view>
			<view class="item-m flex-j-sb">
				<view class="item-m-i">
					<view class="item-m-i-row">
						<text class="txt">委托日期</text>
						<text>2023-12-24</text>
					</view>
					<view class="item-m-i-row">
						<text class="txt">委托数量</text>
						<text>{{item.num}}</text>
					</view>
					<view class="item-m-i-row">
						<text class="txt">成交数量</text>
						<text>{{item.dealNum || 0}}</text>
					</view>
				</view>
				<view class="item-m-i">
					<view class="item-m-i-row">
						<text class="txt">方向类型</text>
						<text>{{item.direction==0?'买入':'卖出'}}{{item.type==0?'订立':'转让'}}</text>
					</view>
					<view class="item-m-i-row">
						<text class="txt">委托价格</text>
						<text>{{item.price}}</text>
					</view>
				</view>
			</view>
			<view class="item-b flex-j-fe">
				<view class="btn" @tap="goExchange(item.orderId)">详情</view>
			</view>
		</view>
	</view>
	<view class="none" v-else>暂无数据</view>
	</template>
	
	<template v-if="tabIndex === 1">
		<view class="none">暂无数据</view>
	</template>
  </view>
</template>

<script>
	import { getUserOrder } from '@/api/home.js'
export default {
  data() {
    return {
		_isLoading:false,
		tabIndex:0,
		list: [{ name: '订单委托' }, { name: '订单成交' }],
		dataList:[],
		page:1,
		size:10
    };
  },
  onLoad() {
  	this.getData()
  },
  onReachBottom() {
  	if(this._isLoading) return
  	if((this.page * this.size) > this.dataList.length) return uni.$showToast('暂无更多数据')
  	this.page++
  	this.getData()
  },
  methods:{
  	async getData(){ //  
		this._isLoading = true
  		const res = await getUserOrder({
  			pageSize:this.size,
  			pageNum:this.page,
  		})
  		// console.log(res);
  		this._isLoading = false
  		// console.log(res);
  		if(res.rows) {
  			this.dataList = this.dataList.concat(res.rows)
  		}
  	},
	  goExchange(id){
	  	uni.navigateTo({
	  		url:'./orderDetail?id='+id
	  	})
	  },
	  changeTabs(e){
	  	this.tabIndex = e.index
	  },
	  onNavigationBarButtonTap(e){ // 点击更多
	  	console.log(e);
	  }
  }
};
</script>
<style lang="scss" scoped>
	.list {
		font-size: 26rpx;
		padding: 20rpx;
		.item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 5px;
			background-color: white;
			.item-t {
				.tit {
					// font-weight: bold;
					font-weight: 30rpx;
				}
				.status {
					color: gray;
				}
			}
			.item-m {
				margin: 20rpx 0px;
				.item-m-i {
					width: 45%;
					.item-m-i-row {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 5rpx;
						
					}
				}
			}
			.item-b {
				padding: 0px 10rpx;
				.btn {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 30rpx;
					text-align: center;
					border: 1rpx solid #ddd;
					+.btn {
						margin-left: 30rpx;
					}
				}
			}
		}
		
		.txt {
			color: gray;
		}
		.red {
			color: #E20000;
		}
	}
	
	.none {
		font-size: 30rpx;
		margin-top: 100rpx;
		text-align: center;
	}
</style>
